<template>
  <div class="grid flex flex-col">
    <div class="grid__header"
         v-if="title">{{title}}</div>

    <div class="grid__body">
      <el-table :data="dataset"
                :max-height="300"
                border>
        <el-table-column v-for="(key) in columns"
                         show-overflow-tooltip
                         :key="key"
                         :prop="key"
                         :label="key"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Grid',
  inheritAttrs: false,
  props: {
    dataset: {
      type: Array,
      default: () => ([])
    },
    title: String,
  },
  computed: {
    columns () {
      return this.dataset.length ? Object.keys(this.dataset[0]) : []
    }
  }
}
</script>

<style lang="scss" scoped>
.grid {
  &__header {
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
  }
  &__body {
    max-height: 300px;
  }
}
</style>